import {
    AlipayCircleOutlined,
    LockOutlined,
    RedditOutlined,
    TaobaoCircleOutlined,
    UserOutlined,
    WeiboCircleOutlined,
} from '@ant-design/icons';
import {
    LoginForm,
    ProConfigProvider,
    ProFormCheckbox,
    ProFormText,
    setAlpha,
} from '@ant-design/pro-components';
import {useEmotionCss} from '@ant-design/use-emotion-css';
import {Button, Space, theme} from 'antd';
import type { CSSProperties } from 'react';
import logo from "../../assets/logo1.png"
import loginbg from "../../assets/loginbg.png"
import {useNavigate} from "react-router-dom";
const Register = ()=>{
    const { token } = theme.useToken();
  const navigate= useNavigate()
    const iconStyles: CSSProperties = {
        marginInlineStart: '16px',
        color: setAlpha(token.colorTextBase, 0.2),
        fontSize: '24px',
        verticalAlign: 'middle',
        cursor: 'pointer',
    }
    const containerClassName = useEmotionCss(() => {
        return {
            height: '100vh',
            overflow: 'auto',
            backgroundImage: "url("+loginbg+")",
            backgroundSize: '100% 100%',
        };
    });
    // 返回注册页面
    const toLogin = ()=>{
        navigate("/login")
    }
    return(
        <ProConfigProvider hashed={false}>
            <div className={containerClassName} style={{
                backgroundColor: token.colorBgContainer ,
            }}>
                <LoginForm
                    logo={logo}
                    title="无尽Api接口开放平台"
                    subTitle="一个为用户和开发者提供全面API接口调用服务的平台"
                    submitter={
                        {
                            searchConfig: {
                                submitText: "注册"
                            }
                        }
                }
                    actions={
                        <Space>
                            其他登录方式
                            <AlipayCircleOutlined style={iconStyles} />
                            <TaobaoCircleOutlined style={iconStyles} />
                            <WeiboCircleOutlined style={iconStyles} />
                        </Space>

                    }
                >

                    <ProFormText
                        name="userName"
                        fieldProps={{
                            size: 'large',
                            prefix: <RedditOutlined/>,
                        }}
                        placeholder={'请输入昵称'}
                    />
                    <ProFormText
                        name="userAccount"
                        fieldProps={{
                            size: 'large',
                            prefix: <UserOutlined/>,
                        }}
                        placeholder={'请输入账号'}
                        rules={[
                            {
                                required: true,
                                message: '账号是必填项！',
                            },
                        ]}
                    />
                    <ProFormText.Password
                        name="userPassword"
                        fieldProps={{
                            size: 'large',
                            prefix: <LockOutlined/>,
                        }}
                        placeholder={'请输入密码'}
                        rules={[
                            {
                                required: true,
                                message: '密码是必填项！',
                            },
                        ]}
                    />
                    <ProFormText.Password
                        name="checkPassword"
                        fieldProps={{
                            size: 'large',
                            prefix: <LockOutlined/>,
                        }}
                        placeholder={'请确认密码'}
                        rules={[
                            {
                                required: true,
                                message: '确认密码是必填项！',
                            },
                        ]}
                    />
                    <div
                        style={{
                            marginBlockEnd: 24,
                        }}
                    >
                        {/*用户协议*/}
                        <ProFormCheckbox
                            initialValue={true}
                            name="agreeToAnAgreement"
                            rules={[
                                () => ({
                                    validator(_, value) {
                                        if (!value) {
                                            return Promise.reject(new Error("同意协议后才可以注册"));
                                        }
                                        return Promise.resolve();
                                    },
                                    required: true,
                                })]}
                        >
                            同意并接受《<a
                            target={"_blank"}
                            href={"https://gitee.com/qimu6/statement/blob/master/%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE.md#%E6%9F%92%E6%9C%A8%E6%8E%A5%E5%8F%A3-%E9%9A%90%E7%A7%81%E6%9D%A1%E6%AC%BE"}
                            rel="noreferrer">隐私协议</a>》《<a
                            target={"_blank"}
                            href={"https://gitee.com/qimu6/statement/blob/master/%E6%9F%92%E6%9C%A8%E6%8E%A5%E5%8F%A3%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE.md#%E6%9F%92%E6%9C%A8%E6%8E%A5%E5%8F%A3%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE"}
                            rel="noreferrer">用户协议</a>》

                        </ProFormCheckbox>
                        <a
                            style={{
                                float: 'right',
                                marginBottom:"20px"
                            }}
                            onClick={()=>toLogin()}
                        >
                            已有账号?去登录
                        </a>
                    </div>
                </LoginForm>
            </div>
        </ProConfigProvider>
    )
}
export default Register
